<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="count++">累加</button>
    <button @click="destroy">卸载组件</button>
    <hr />
    <Header :count="count"/>
  </div>
</template>

<script>
import Header from "@/components/Header";
export default {
  name: "App",
  components: {
    Header,
  },
  data() {
    return {
      count: 1,
    };
  },
  beforeCreate() {
    console.log("----beforeCreate----");
  },
  created() {
    console.log("----created----");
  },
  beforeMount() {
    console.log("----beforeMount----");
  },
  mounted() {
    console.log("----mounted----");
  },
  beforeUpdate() {
    console.log("----beforeUpdate----");
  },

  updated() {
    console.log("----updated----");
  },

  beforeDestroy() {
    console.log("----beforeDestroy----");
  },
  destroyed() {
    console.log("----destroyed----");
  },

  methods: {
    destroy() {
      this.$destroy();
    },
  },
};
</script>

<style>
</style>